<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键菜单栏案例</title>
</head>
<style>
    ul{
        list-style:none;
        padding:0;
        margin:0;
    }
    .contextMenu{
        display:none;
        position: absolute;
        top:0;
        left:0;
        padding:2px;
        width:220px;
        border:1px solid #ccc;
    }
    .contextMenu li{
        position:relative;
        padding-left:10px;
        border-bottom:1px solid #ccc;
        list-style: 2.2;
    }
    .contextMenu li:hover{
       background-color:yellow;
    }
    .contextMenu li:last-child{
        border:none;
    }
    .contextMenu li span{
        position: absolute;
        right: 5px;
        top:0;
        color:#58bc58;
    }
    

</style>
<body>
    <div class="contextMenu">
        <ul>
            <li class="copy">复制<span>Ctrl+C</span></li>
            <li class="paste">粘贴<span>Ctrl+V</span></li>
            <li class="cut">剪切<span>Ctrl+<X/span></li>
            <li class="delete">删除<span>Del</span></li>
            <li class="save">保存<span>Ctrl+S</span></li>
        </ul>
    </div>
    <script>
        // 点击右键的时候阻止默认的菜单，显示我们自定义的菜单
        // contextMenu 右键事件 菜单事件
        // contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单
        var contextMenu=document.querySelector('.contextMenu');
        window.oncontextmenu=function(e){
            e.returnValue=false;
            contextMenu.style.display='block';
            contextMenu.style.left=e.clientX+'px';
            contextMenu.style.top=e.clientY+'px';
        }
        window.onclick=function(e){
            if(e.target.className==='copy'){
                alert('复制')
            }
            contextMenu.style.dispaly='none';
        }
    </script>
</body>
</html>